<template>
  <div class="p-4">
    <el-input type="textarea" :rows="10" placeholder="请输入JSON内容" v-model="jsonInput" class="mb-4" />
    <el-button type="primary" @click="onInit" class="mb-4">
      确定
    </el-button>

    <div class="flex gap-4 items-center mt-4">
      <el-input v-model="width"></el-input>
      <el-button type="primary">确定</el-button>
      <el-input v-model="curName"></el-input>
      <el-button type="primary" @click="changeName">修改名称</el-button>

      <template v-if="curTag">
        <div class="text-nowrap">禁止编辑：</div>
        <el-switch v-model="curTag.disabled" />
        <div class="text-nowrap">字典：</div>
        <el-input v-model="curTag.dicName" @change="showLog"></el-input>
        <!-- <el-button @click="changeDicName">确定</el-button> -->
      </template>

    </div>

    <div class="flex gap-4 items-center mt-8 p-4">
      <div class="text-nowrap">筛选：</div><el-input v-model="keyword"></el-input>
    </div>

    <div class="bg-[#f9f9f9] mt-8 p-4">
      <h4>表单</h4>

      <div class="flex gap-4 items-center mt-4">
        <el-button @click="onRow(2)">2列</el-button>
        <el-button @click="onRow(3)">3列</el-button>
        <el-button @click="onRow(4)">4列</el-button>
        <el-button @click="filterList = []">清空</el-button>
      </div>

      <div class="flex gap-4 items-center mt-4 flex-wrap">
        <el-tag v-for="tag in filterList" :type="tag == curTag ? 'warning' : 'info'" @click="curTag = tag"
          class="cursor-pointer" :key="tag.prop" closable :disable-transitions="false" @close="handleCloseFilter(tag)">
          {{ tag.label }}
        </el-tag>
      </div>
      <div class="flex gap-4 items-center mt-4 flex-wrap">
        <el-tag v-for="tag in filterTags" type="success" class="cursor-pointer" @click="filterList.push(tag)"
          :key="tag.prop" :disable-transitions="false">
          {{ tag.label }}
        </el-tag>
      </div>
    </div>

    <el-button class="w-full my-8" type="danger" @click="onCreate">生成代码</el-button>


    <el-input type="textarea" :rows="10" placeholder="替换后的结果" v-model="result" readonly class="w-full mb-4" />

  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const width = ref(120)
const curTag = ref(null)
const curName = ref("")
const filterList = ref([])
const span = ref(12)
// const formList = ref([])
// const group = ref([])
const keyword = ref("")


const jsonInput = ref(localStorage.getItem("strItem") || '');
const tabList = ref([])
const trList = ref([])
const result = ref("")
const changeName = () => {
  if (curTag) {
    curTag.value.label = curName.value
  }
}

const showLog = () => {
  // console.log("group", group.value)
  // console.log("formList", formList.value)
  // console.log("filterList", filterList.value)
  // console.log("curTag", curTag.value)
}

const filterTags = computed(() => {
  if (keyword.value) {
    return tabList.value.filter(item => {
      return item.label.includes(keyword.value)
    })
  }
  return tabList.value;
})

const onRow = (n) => {
  span.value = 24 / n
}

const handleCloseFilter = (tag) => {
  filterList.value.splice(filterList.value.indexOf(tag), 1)
}


const handleCloseTr = (tag) => {
  trList.value.splice(trList.value.indexOf(tag), 1)
}


const handleCloseForm = (list, tag) => {
  list.splice(list.indexOf(tag), 1)
}

function onInit() {
  try {
    const json = JSON.parse(jsonInput.value);
    console.log(json)
    localStorage.setItem("strItem", jsonInput.value)
    tabList.value = json;
    // group.value = json.group

    // result.value = modifiedLines.join('\n');
  } catch (error) {
    console.error('处理错误:', error);
    result.value = '处理错误，请检查输入内容。';
  }
}

const onCreate = () => {
  // const list = JSON.parse(jsonInput.value);
  // trList.value.forEach(item => {
  //   const res = filterList.value.find(i => i.label == item.label)
  //   if (res) {
  //     item.search = true
  //   }
  // })
  // json.column = clone(trList.value);
  const list = clone(filterList.value);
  addDicName(list)
  list.forEach(i => {
    i.span = span.value
  })

  result.value = JSON.stringify(list, null, 2)
  console.log(json)
}

const clone = (obj) => {
  return JSON.parse(JSON.stringify(obj));
}
const addDicName = (list) => {
  list.forEach(i => {
    if (i.dicName) {
      i.type = "select";
      i.dicUrl = "/system/dict/dictionary?code=" + i.dicName;
      i.props = {
        label: "dictValue",
        value: "dictKey"
      }
      delete i.dicName
    }
  })
}
</script>
